<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link rel="stylesheet" href="/asset/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/asset/modules/dtree/dtree.css">
    <link rel="stylesheet" href="/asset/modules/dtree/font/dtreefont.css">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card-body">
                <div class="layui-form" lay-filter="form">
                    <div class="layui-form-item">
                        <ul id="dtree" class="dtree" data-id="0"></ul>
                    </div>
                    <div class="layui-form-item layui-hide">
                        <input type="button" lay-submit lay-filter="add" id="add">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/asset/layui/layui.js"></script>
<script src="/my/fast.js"></script>
<script>
    layui.config({
        base: '/asset/modules/'
    }).extend({
        dtree: 'dtree/dtree'
    }).use(['dtree'], () => {
        let $ = layui.$
        let form = layui.form
        let dtree = layui.dtree;

        // 接口地址
        let permTree = UPMS_ADDRESS + '/sysPerm/permTree';
        let sysRolePerm_listPermIdsByRoleId = UPMS_ADDRESS + '/sysRolePerm/listPermIdsByRoleId';
        let sysRolePerm_addPerms = UPMS_ADDRESS + '/sysRolePerm/addPerms';

        // 左侧树
        let dtreeNode = dtree.render({
            elem: '#dtree',// 树绑定的元素ID
            url: permTree,// 默认请求为post,改为get会出问题
            height: '750',// 树高度
            skin: 'laySimple',// 树主题,theme,laySimple,layui
            line: true,// 开启树线
            checkbar: true,// 开启复选框
            checkbarType: "p-casc", // 复选框选中形式,all,no-all,p-casc,self,only
            menubar: true,// 开启顶部菜单栏
            menubarTips: { //顶部菜单栏选项，此处去除了remove
                group: ["moveDown", "moveUp", "refresh", "checkAll", "unCheckAll", "invertAll", "searchNode"]
            },
            success: (data, ul, first) => {
                let roleId = oneValue();
                $.get(sysRolePerm_listPermIdsByRoleId, {roleId: roleId}, (rs) => {
                    // 选中复选框
                    dtree.chooseDataInit("dtree", rs.data.toString());
                    // 监听表单提交--add
                    form.on('submit(add)', data => {
                        // 获取选中的节点
                        let checkedNodes = dtree.getCheckbarNodesParam("dtree");
                        let permIds = [];
                        $.each(checkedNodes, (i, v) => {
                            // 减0是为了返回number类型而不是string
                            permIds.push(v.nodeId - 0)
                        });
                        layuiSubmit(sysRolePerm_addPerms, {roleId: roleId, permIds: permIds.toString()}, 'table');
                    });
                });
            }
        });

    });
</script>
</body>
</html>
